import React, { Component, Fragment } from "react";
// antd
import { Table, Button, Form, Select, Typography, Space, Tag, message } from "antd";

// http
import http from '../../utils/request';
// import XLSX from "xlsx"
import ExportJsonExcel from "js-export-excel";

import { Tabs } from "antd";
const { TabPane } = Tabs;

const { Link } = Typography;
const { Option } = Select;

class Sas extends Component {
    constructor(props){
        super(props)
        this.state = {
            loading: false,

            // 分页
            total: '',
            page: 1,
            page_number: 10,

            // 搜索
            search_instance_platform: null,
            search_instance_account_name: null,
            search_option_platform: [],
            search_option_account: [],

            selectedRowKeys: [],

            loading_label: false,
            label_database_list: null,
            resp_vul_data_business: null,
            vul_data_ops: null,
            
            // 表格
            dataSourceVul: [],
            dataSourceBusiness: [],
            dataSourceOps: [],
            columnsVul: [
                {title: "漏洞名称", dataIndex: "AliasName", key: "AliasName"},
                {title: "漏洞代码", dataIndex: "Name", key: "Name"},
                {title: "漏洞状态", dataIndex: "Status", key: "Status"},
                {title: "待处理数", dataIndex: "PendingCount", key: "PendingCount"},
                {title: "参考链接", dataIndex: "Reference", key: "Reference"},
            ],
            columns: [
                {title: "漏洞名称", dataIndex: "name", key: "name"},
                {title: "类型", dataIndex: "type", key: "type"},
                {title: "漏洞实例", dataIndex: "instance_ip", key: "instance_ip"},
                {title: "项目名称", dataIndex: "local_name", key: "local_name",
                    render: (text, rowData) => {
                        return(
                            <Space direction="vertical">
                                <Link href="">
                                    {rowData.local_name}
                                </Link>
                            </Space>
                        )
                    }
                },
                {title: "中文名称", dataIndex: "project_name", key: "project_name",
                    render: (text, rowData) => {
                        return(
                            <div>
                                <Tag color="green">{rowData.project_name}</Tag>                                
                            </div>
                        )
                    }
                },
                {title: "负责人", dataIndex: "owner", key: "owner"},
                {title: "分享人", dataIndex: "share", key: "share"},
                {title: "漏洞文件", dataIndex: "path", key: "path"},
                {title: "仓库地址", dataIndex: "git", key: "git"},
            ],
        }
        this.formRefLabel = React.createRef();

    }

    componentDidMount() {
        this.loadDataPlatform()
    }

    loadDataPlatform = () => {
        const requestData = {
            'page': 1,
            'limit': 1000,
        }
        http.get('/cloud/platform', {params: requestData}).then(response=>{
            const search_option_platform = []
            const resp_data = response.data.data.items
            for (let i = 0; i < resp_data.length; i++) {
                search_option_platform.push(<Option key={resp_data[i].name}>{resp_data[i].name}</Option>)
            }
            this.setState({
                search_option_platform: search_option_platform
            })
        })
    }

    // 切换每页数量
    onChangeSizePage = (page, page_number) => {
        this.setState({
            page: page,
            page_number: page_number,
        }, () => {
            this.loadData()
        })
    } 

     /** 搜索 */
    onFinishSearch = (data) => {
        if (this.state.search_instance_platform && this.state.search_instance_account_name) {
            this.setState({
                loading: true
            })
            const requestData = {
                'account_name': this.state.search_instance_account_name,
                'platform': this.state.search_instance_platform,
            }
            // 获取列表
            http.get('/cloud/sas', {params: requestData}).then(response=>{
                this.exportExcel(response.data.data.resp_vul_help, response.data.data.resp_vul_data_business, response.data.data.resp_vul_data_ops)
                this.setState({
                    dataSourceVul: response.data.data.resp_vul_help,
                    dataSourceBusiness: response.data.data.resp_vul_data_business,
                    dataSourceOps: response.data.data.resp_vul_data_ops,
                    loading: false
                })
            }).catch(error => {
                this.setState({
                    loading: false,
                })
            })
        } else {
            message.info('请先选中云平台和云账户信息')
        }
    }

    // 搜索切换云平台
    onChangePlatform = (value) => {
        if (value) {
            this.setState({
                search_instance_platform: value
            })

            const requestData = {
                'page': 1,
                'limit': 1000,
                'platform': value
            }
    
            http.get('/cloud/account', {params: requestData}).then(response=>{
                const search_option_account = []
                const resp_data = response.data.data.items
                for (let i = 0; i < resp_data.length; i++) {
                    search_option_account.push(<Option key={resp_data[i].name}>{resp_data[i].name}</Option>)
                }
                this.setState({
                    search_option_account: search_option_account,
                })
            })
        } else {
            this.setState({
                search_option_account: null,
                search_instance_platform: null,
            })
        }
    }

    // 搜索云账户
    onChangeAccountName = (value) => {
        this.setState({
            search_instance_account_name: value ? value : null
        })
    }

    // 导出文件
    exportExcel = (vul_help, vul_data_business, vul_data_ops) => {
        // if ((vul_help && vul_data_business) || (vul_help && vul_data_ops)) {
        if (vul_help && vul_data_business) {

            let sheetFilter = ["name", "type", "instance_ip", "local_name", "project_name", "owner", "share", "path", "git"];
            let sheetFilterHelp = ["AliasName", "Name", "Status", "PendingCount",  "Summary", "Content", "Solution", "Reference"]
            let option = {}
            option.fileName = '云账户应急漏洞表'
            option.datas = [
                {
                    sheetData: vul_help,
                    sheetName: '修复说明',
                    sheetFilter: sheetFilterHelp,
                    sheetHeader: ["漏洞名称", "漏洞代码", "漏洞状态", "待处理漏洞", "漏洞汇总", "漏洞内容", "解决方案", "参考链接",]
                },
                {
                    sheetData: vul_data_business,
                    sheetName: '应急漏洞 (业务侧)',
                    sheetFilter: sheetFilter,
                    sheetHeader: ["漏洞名称", "类型", "实例地址", "本地名称", "项目名称", "负责人", "分享人", "项目路径", "仓库地址"]
                },
                {
                    sheetData: vul_data_ops,
                    sheetName: '应急漏洞 (运维侧)',
                    sheetFilter: sheetFilter,
                    sheetHeader: ["漏洞名称", "类型", "实例地址", "本地名称", "项目名称", "负责人", "分享人", "项目路径", "仓库地址"]
                }
            ]
            var toExcel = new ExportJsonExcel(option)
            toExcel.saveExcel()
        } else {
            message.info('请先查询云平台账户的应急漏洞数据')
        }
    }

    render(){
        const { loading, columns, columnsVul, dataSourceBusiness, dataSourceOps, dataSourceVul, search_option_platform, search_option_account, selectedRowKeys } = this.state
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        }
        var myStyleForm = {marginRight: '10px', marginTop: '5px'}

        return (
            <Fragment>
                <Form layout="inline" onFinish={this.onFinishSearch} size="small">

                    <Form.Item label="云平台" name="platform" style={myStyleForm}>
                        <Select
                            allowClear
                            showSearch
                            style={{ width: 200 }}
                            placeholder="请选择区域"
                            optionFilterProp="children"
                            onChange={this.onChangePlatform}
                            filterOption={(input, option) =>
                            option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                        >
                            {search_option_platform}
                        </Select>
                    </Form.Item>   

                    <Form.Item label="云账户" name="account_name" style={myStyleForm}>
                            <Select
                                allowClear
                                showSearch
                                style={{ width: 200 }}
                                placeholder="请选择云账户"
                                onChange={this.onChangeAccountName}
                                >
                                {search_option_account}
                            </Select>                      
                    </Form.Item>   
    
                    <Form.Item shouldUpdate={true} style={myStyleForm}>
                        <Button type="primary" htmlType="submit">搜索并导出</Button>
                    </Form.Item>
                </Form>

                <div><Button type="primary"></Button></div>

                <Tabs defaultActiveKey="1">
                    <TabPane tab="漏洞列表" key="1">
                        <Table
                            size="small"
                            pagination={false} 
                            rowSelection={rowSelection} 
                            rowKey="id" 
                            columns={columnsVul} 
                            dataSource={dataSourceVul}
                            loading={loading}
                            scroll={{ y: 500, x: '70vw' }}
                        >
                        </Table>
                    </TabPane>

                    <TabPane tab="业务侧" key="2">
                        <Table
                            size="small"
                            pagination={false} 
                            rowSelection={rowSelection} 
                            rowKey="id" 
                            columns={columns} 
                            dataSource={dataSourceBusiness}
                            loading={loading}
                            scroll={{ y: 600, x: '70vw' }}
                            >
                        </Table>
                    </TabPane>

                    <TabPane tab="运维侧" key="3">
                        <Table
                            size="small"
                            pagination={false} 
                            rowSelection={rowSelection} 
                            rowKey="id" 
                            columns={columns} 
                            dataSource={dataSourceOps}
                            loading={loading}
                            scroll={{ y: 500, x: '70vw' }}
                        >
                        </Table>
                    </TabPane>
                </Tabs>
            </Fragment>
        )
    }
}

export default Sas;